<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <title>开课吧</title>
    <style>
        html,body{
            height: 100%;
        }
        body {
            margin: 0;
            background: url("img/bg.png") no-repeat 0 0/100% 100%;
        }

        /* 在这一行下面写css */
        .title {
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0,0,0,0.6);

        }

        .left {
            width: 479px;
            height: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 36px;
            color: #ffffff;
        }

        .right {
            width: 177px;
            height: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 36px;
            color: #ffffff;
        }

        .right img {
            width: 30px;
            border-radius: 50%;
        }

        .set {
            width: 69px;
        }

        .logo{
            height: 164px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .logo img{
            width: 203px;
            height: 81px;
        }

        .search{
            height: 77px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .input{
            border: none;
            width: 630px;
            height: 50px;
        }
        .btn{
            width: 124px;
            height: 52px;
            border: none;
            background-color: #C4CCCF;
        }
        .ad{
            height:533px ;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .context{
            width: 1256px;
            height: 410px;
            background-color: rgba(255,255,255,0.85);
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        .swiper-wrapper{
            padding-left: 31px;
            width: 900px;
            height: 357px;
        }
        .swiper-wrapper img{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .list{
            width: 350px;
            height: 300px;
           padding-left: 44px;
            font-size: 6px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .list ol{
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            align-content: space-between;
        }
        .list ol li {
            line-height: 45px;
        }
        .list ol:nth-child(1){


        }
    </style>
</head>

<body>

<!--在这一行下面写html-->

<div class="title">
    <div class="left">
        <spn>新闻</spn>
        <spn>官网</spn>
        <spn>地图</spn>
        <spn>直播</spn>
        <spn>视频</spn>
        <spn>贴吧</spn>
        <spn>学术</spn>
        <spn>更多</spn>
    </div>
    <div class="right">
        <spn class="set">设置</spn>
        <img src="img/header.png">
        <span>YiFee</span>
    </div>

</div>
<div class="logo">
    <img src="img/logo.png">
</div>
<div class="search">
    <input class="input" type="text">
    <input class="btn" type="button" value="开心一下">

</div>
<div class="ad">
    <div class="context">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <img class="swiper-slide" src="img/banner.png" >
                <img class="swiper-slide" src="img/img01.png" >
                <img class="swiper-slide" src="img/img02.png" >
                <img class="swiper-slide" src="img/img03.png" >
                <img class="swiper-slide" src="img/img04.png" >
                <img class="swiper-slide" src="img/img05.png" >
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="list">
            <ol>
                <li>31省区市新增确诊20例 本土6例488万</li>
                <li>中国成功实施反导拦截技术试验热471万</li>
                <li>CGTN:坚决反对英国吊销其落地许可455万</li>
                <li>东部战区回应美军舰穿航台湾海峡439万</li>
                <li>拜登发表上任后首份外交政策演讲423万</li>
                <li>上海新增1例本地确诊病例409万</li>
                <li>圭亚那终止与台湾设立办公室协议394万</li>
            </ol>
        </div>

    </div>


</div>
<!--
    作业要求：搜索首页
    备注：打开下面链接可以获取到设计稿相关数据，根据数据来实现整个页面
    https://app.mockplus.cn/s/Ar7a65Lxuu4
 -->

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',

        },
    });
</script>
</body>

</html>